<template>
  <!--消息列表组件 数据交互频繁-->
  <!--进入 dialogue 页面，携带参数 mid name group_num -->
  <li :class="{ 'item-hide': item.is_show == 0 }">
    <!--自定义指令 v-swiper 用于对每个消息进行滑动处理-->

    <!-- 先渲染 好友会话列表 -->
    <router-link
      :to="{
        path: '/wechat/dialogue',
        query: { mid: item.mid, name: nickname, group_num: group_num },
      }"
      tag="div"
      class="list-info"
      :class="item.is_top ? 'backgray' : ''"
      v-swiper
    >
      <div class="header-box">
        <!--未读并且未屏蔽 才显示新信息数量-->
        <!--未读并且未屏蔽 才显示新信息数量-->
        <i
          class="new-msg-count"
          v-show="item.msg_reda_number > 0 && !item.quiet"
          >{{ item.msg_reda_number }}</i
        >
        <!--未读并且屏蔽 只显示小红点-->
        <i
          class="new-msg-dot"
          v-show="item.msg_reda_number > 0 && item.quiet"
        ></i>
        <!--如果是私聊，只显示一个头像； 如果是群聊，则显示多个头像，flex 控制样式  通过 online==1 在线 来判断 用户是否在线-->
        <div
          class="header"
          :class="item.online != 1 ? 'img-gray' : ''"
          v-if="item.type == 1"
        >
          <img :src="item.getClientMid.headimg" />
        </div>
        <div class="header" v-if="item.type == 2">
          <img
            v-for="(userInfo, index) in item.getUserGroup.user_list"
            :key="index"
            :src="userInfo.getClientUid.headimg"
          />
        </div>
      </div>
      <div class="desc-box">
        <!--使用过滤器 fmtDate 格式化时间-->
        <!-- <div class="desc-time" v-if="item.msg_list && item.msg_list.create_time">{{item.msg_list.create_time | fmtDate('hh:mm')}}</div> -->
        <div class="desc-time" v-if="item.msg_list && item.msg_list.datetime">
          {{ item.msg_list.datetime }}
        </div>
        <!--如果没有备注好友，则显示微信昵称-->
        <div class="desc-author">{{ nickname }}</div>
        <!-- 如果是群消息 -->
        <!-- <div class="desc-author" v-if="item.type==2">{{item.getUserGroup.name}}</div> -->
        <div class="desc-msg">
          <div class="desc-mute iconfont icon-mute" v-show="item.quiet"></div>
          <span v-if="item.type == 2 && item.msg_list.from_user_nickname"
            >{{ item.msg_list.from_user_nickname }}:</span
          >
          <span v-if="item.msg_list && item.msg_list.id">
            <span
              v-if="item.msg_list.type == 1"
              v-html="parsingEmoji(item.msg_list.msg)"
            ></span>
            <span v-if="item.msg_list.type == 2">[图片]</span>
          </span>
        </div>
      </div>
    </router-link>

    <div class="operate-box">
      <div class="operate-unread" v-on:click="setMessageTop">
        {{ item.is_top == 1 ? "取消置顶" : "置顶聊天" }}
      </div>
      <div class="operate-del" v-on:click="deleteMsgEvent">删除</div>
    </div>
  </li>
</template>
<script>
import { ApiSetUp } from "@/api/api/message";
import { Badge } from "vant";
import Emoji from "@/components/emoji2/emoji.vue";
export default {
  components: {
    [Badge.name]: Badge,
  },
  props: ["item"],
  data() {
    return {
      read: this.item.read,
      deleteMsg: false,
    };
  },
  computed: {
    // 计算 列表上显示的用户的名称
    nickname() {
      let name = "";
      if (this.item.type == 1) {
        //个人
        if (this.item.getClientMid) {
          name = this.item.remark || this.item.getClientMid.nickname;
        }
      } else {
        // 群
        name = this.item?.getUserGroup?.name || "";
      }
      return name;
    },
    //聊天对象数量
    group_num() {
      if (this.item.type == 1) {
        return 1;
      } else {
        return this.item?.getUserGroup?.member_number || 0;
      }
    },
  },
  methods: {
    // //切换消息未读/已读状态
    // toggleMsgRead(event, status) {
    //     if (status === 'enter') {
    //         if (this.read) {
    //             return ''
    //         }
    //         this.read = true
    //     } else {
    //         this.read = !this.read
    //     }
    //     if (!this.item.quiet) {
    //         if (this.read) {
    //             this.$store.commit('minusNewMsg')
    //         } else {
    //             this.$store.commit('addNewMsg')
    //         }
    //     }
    //     event.target.parentNode.parentNode.firstChild.style.marginLeft = 0 + "px"
    // },
    //删除会话列表
    deleteMsgEvent(event) {
      if (confirm("删除后，仅会在对话列表删除，不会删除聊天记录")) {
        this.item.is_show = 0; // 从会话列表移除
        this.item.msg_reda_number = 0; // 清空未读数量
        let params = {
          mid: this.item.mid,
          field: "is_show",
          value: 0,
        };
        //删除会话列表
        ApiSetUp(params).then(({ msg }) => {});
        event.target.parentNode.parentNode.firstChild.style.marginLeft =
          0 + "px";
      }
    },
    //设置会话置顶
    setMessageTop(event) {
      this.item.is_top = this.item.is_top == 1 ? 0 : 1;
      this.$store.commit("upMsgListSort"); // 更新排序
      event.target.parentNode.parentNode.firstChild.style.marginLeft = 0 + "px";
      let params = {
        field: "is_top",
        value: this.item.is_top,
        mid: this.item.mid,
      };
      // 发起修改
      ApiSetUp(params).then(({ data, msg }) => {
        console.log(msg);
      });
    },
  },
  // 参考 https://vuefe.cn/v2/guide/custom-directive.html
  directives: {
    swiper: {
      bind: function (element) {
        var isTouchMove, startTx, startTy;
        element.addEventListener("touchstart", function (e) {
          var touches = e.touches[0];
          startTx = touches.clientX;
          startTy = touches.clientY;
          isTouchMove = false;
        });
        element.addEventListener(
          "touchmove",
          function (e) {
            e.preventDefault();
            var touches = e.changedTouches[0],
              endTx = touches.clientX,
              endTy = touches.clientY,
              distanceX = startTx - endTx,
              distanceY = startTy - endTy;
            if (distanceX < 0) {
              //右滑
              if (Math.abs(distanceX) >= Math.abs(distanceY)) {
                if (Math.abs(distanceX) > 20) {
                  element.style.transition = "0.3s";
                  element.style.marginLeft = 0 + "px";
                }
              }
            } else {
              //左滑
              if (Math.abs(distanceX) >= Math.abs(distanceY)) {
                if (distanceX < 145 && distanceX > 20) {
                  element.style.transition = "0s";
                  element.style.marginLeft = -distanceX + "px";
                  isTouchMove = true;
                }
              }
            }
          },
          { passive: false }
        );
        element.addEventListener("touchend", function (e) {
          if (!isTouchMove) {
            return;
          }
          var touches = e.changedTouches[0],
            endTx = touches.clientX,
            endTy = touches.clientY,
            distanceX = startTx - endTx,
            distanceY = startTy - endTy;
          // isSwipe = false
          if (Math.abs(distanceX) >= Math.abs(distanceY)) {
            if (distanceX < 0) {
              return;
            }
            if (Math.abs(distanceX) < 60) {
              // isSwipe = true
              element.style.transition = "0.3s";
              element.style.marginLeft = 0 + "px";
            } else {
              element.style.transition = "0.3s";
              element.style.marginLeft = "-145px";
            }
          }

          //自动收回
          setTimeout(() => {
            element.style.marginLeft = 0 + "px";
          }, 2000);
        });
      },
    },
  },
};
</script>